<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/eui.css">
    <link rel="icon" href="logo.ico">
    <title>后台管理</title>
    <style>
        body{
            font: 18px "Hiragino Sans GB";
            margin: 0;
        }
        header{
            box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
        }
        .el-carousel__item:nth-child(2n) {
            background-color: #99a9bf;
        }
        .el-carousel__item:nth-child(2n+1) {
            background-color: #d3dce6;
        }
        .el-table .el-table__cell{
            padding: 0;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container style="width: 1350px">
        <el-aside  width="201px">
            <el-menu
                    class="el-menu-vertical-demo"
                    @select="handleClose"
                    background-color="#545c64"
                    text-color="#fff"
                    default-active="1-1"
                    active-text-color="#ffd04b">
                <div style="padding:0;margin-top: 15px">
                    <a href="" circle target="_blank" style="text-decoration: none;color: black;font-size: 25px;">
                        <img src="img/5.png" style="width: 70px;margin-left: 20px;vertical-align: middle">南焉花里<br>
                        <span style="color: lightgoldenrodyellow;margin-left: 15px;font-size: 15px">后 台 管 理 系 统</span></a>
                </div>
                <el-menu-item index="1-1">
                    <i class="el-icon-menu"></i>
                    <span slot="title">首页</span>
                </el-menu-item>
                <el-submenu index="2">
                    <template slot="title">
                        <i class="el-icon-s-flag"></i>
                        分类管理
                    </template>
                    <el-menu-item index="2-1">分类列表</el-menu-item>
                    <el-menu-item index="2-2">添加分类</el-menu-item>
                </el-submenu>
                <el-submenu index="3">
                    <template slot="title">
                        <i class="el-icon-picture"></i>
                        轮播图管理
                    </template>
                    <el-menu-item index="3-1">轮播图列表</el-menu-item>
                    <el-menu-item index="3-2">添加轮播图</el-menu-item>
                </el-submenu>
                <el-submenu index="4">
                    <template slot="title">
                        <i class="el-icon-shopping-cart-2"></i>
                        商品管理
                    </template>
                    <el-menu-item index="4-1">商品列表</el-menu-item>
                    <el-menu-item index="4-2">添加商品</el-menu-item>
                </el-submenu>
                <el-submenu index="5">
                    <template slot="title">
                        <i class="el-icon-tickets"></i>
                        订单管理
                    </template>
                    <el-menu-item index="5-1">添加订单</el-menu-item>
                    <el-menu-item index="5-2">订单管理</el-menu-item>
                </el-submenu>
                <el-submenu index="6">
                    <template slot="title">
                        <i class="el-icon-timer"></i>
                        秒杀活动
                    </template>
                    <el-menu-item index="6-1">商品秒杀</el-menu-item>
                    <el-menu-item index="6-2">秒杀管理</el-menu-item>
                </el-submenu>
            </el-menu>
            <div style="margin-top: 75px;margin-left: 40px;position: fixed">
                <a href="" target="_blank" style="text-decoration: none;color: #82848a;font-size: 13px;margin-left: 30px">关于商家</a>
                <p style="font-size: 14px;color: #b1b1b1;
                    text-align: center;">Copyright<br>© Alibaba Group</p>
            </div>
        </el-aside>

        <el-container>
            <el-header>
                <el-menu class="el-menu-demo" mode="horizontal">
                    <el-submenu index="7">
                        <template slot="title">常用</template>
                        <el-button  @click="tj">添加分类</el-button>
                        <el-button  @click="tj1">添加轮播图</el-button>
                        <el-button  @click="tj2">添加商品</el-button>
                    </el-submenu>
                    <div style="float: left;margin-top: 15px">
                        <el-input size="mini" @keydown.native.enter="cx()" v-model="wd" placeholder="商品搜索"></el-input>
                        <el-button icon="el-icon-search" style="position: absolute;background-color: rgba(0,0,0,0);border: 0;left: 210px;top: 11px;" @click="cx()"></el-button>
                    </div>
                    <div style="margin-left: 450px;margin-top: 10px">
                        <div style="position: absolute;border: 0;right: 180px;top: 11px">
                            <el-row>
                                <a href="https://blog.csdn.net/qq_41137493/article/details/109537027" target="_blank"><el-button icon="el-icon-reading" circle>学习</el-button></a>
                                <el-button  icon="el-icon-s-comment" circle @click="gg()">广告</el-button>
                                <a href="https://www.zhihu.com/question/19694832/answer/2357639577" target="_blank"><el-button icon="el-icon-question" circle>问题</el-button></a>
                                <el-button  icon="el-icon-phone-outline" circle @click="fk()">反馈</el-button>
                            </el-row>
                        </div>
                    </div>
                    <div style="position: absolute;right: 20px;top: 5px">
                        <el-submenu index="8">
                            <template slot="title">
                                <img src="img/6.jpg" style="width: 32px;border-radius: 22px">
                                唯一管理员</template>
                            <el-menu-item index="8-1" style="font-weight: bold;text-align: center">
                                <i class="el-icon-user" style="color: black"></i><a href="javascript:void(0)" @click="zh()" style="text-decoration: none;color: black">账号信息</a></el-menu-item><br>
                            <el-menu-item index="8-2" style="font-weight: bold;text-align: center">
                                <i class="el-icon-lock" style="color: black"></i><a href="javascript:void(0)" @click="ma()" style="text-decoration: none;color: black">修改密码</a></el-menu-item>
                            <el-divider></el-divider>
                            <el-menu-item index="8-3"><p style="text-align: center;font-weight: bold;line-height: 10px"><a href="javascript:void(0)" @click="lo()">退出当前账号</a></p></el-menu-item>
                        </el-submenu>
                    </div>
                </el-menu>
            </el-header>

            <el-main>
                <el-row class="block-col-1" v-if="Index=='1-1'">
                    <el-col :span="13">
                    <span>店铺数据<span style="font-size: 13px;margin-left: 14px;color: grey">数据更新时间:<span id="clock"></span>
                    <el-dropdown split-button type="primary" size="mini" style="margin-left: 480px" @click="add">
      <i class="el-icon-circle-plus"></i>
        指标
      <el-dropdown-menu slot="dropdown">
          <el-button size="mini" @click="down">
        支付金额
          </el-button><br>
          <el-button size="mini" @click="down1">
        用户数量
          </el-button><br>
          <el-button size="mini" @click="down2">
        加购人数
          </el-button><br>
          <el-button size="mini" @click="down3">
        查看全部
          </el-button>
      </el-dropdown-menu>
    </el-dropdown>
                        </span>
                    </span>
                        <el-table :data="Data">
                            <!--Data[i].Dapay=getDapay->dapay-->
                            <el-table-column label="好评人数" prop="dapay"></el-table-column>
                            <el-table-column label="访客数" prop="davis"></el-table-column>
                            <el-table-column label="差评人数" prop="dauser"></el-table-column>
                            <el-table-column label="已购人数" prop="dapur"></el-table-column>
                            <el-table-column label="操作">
                                <template slot-scope="scope">
                                    <el-popconfirm @confirm="f5"
                                                   title="确定要刷新数据吗？">
                                        <el-button size="mini"
                                                   type="primary" slot="reference">刷新</el-button>
                                    </el-popconfirm>
                                </template>
                            </el-table-column>
                        </el-table>
                        <p>昨日数据</p>
                        <el-table :data="data">
                            <el-table-column label="好评人数" prop="dapay"></el-table-column>
                            <el-table-column label="访客数" prop="davis"></el-table-column>
                            <el-table-column label="差评人数" prop="dauser"></el-table-column>
                            <el-table-column label="已购人数" prop="dapur"></el-table-column>
                        </el-table>
                        <div style="margin-top:90px">
                            <a href="" style="text-decoration: none;color: #6c6c6c" id="d1" target="_blank">南焉花里头条</a>
                            <el-row :gutter="10">
                                <el-col :span="16">
                                    <el-carousel trigger="click" height="150px">
                                        <el-carousel-item v-for="b in pho">
                                            <img :src="b" style="width: 100%;height: 100%" alt="">
                                        </el-carousel-item>
                                    </el-carousel>
                                </el-col>
                                <el-col :span="8">
                                    <p><el-tag>短视频</el-tag><a href="https://weibo.com/tv/show/1034:4758461968482430" circle target="_blank" style="text-decoration: none;font-size: 13px;color: black"> 商标权-真假对比投诉</a></p>
                                    <p><el-tag>资讯</el-tag><a href="" circle target="_blank" style="text-decoration: none;font-size: 13px;color: black"> 南焉花里上新-精选推荐</a></p>
                                    <el-tag>资讯</el-tag><a href="https://www.oh100.com/peixun/kehuguanxi/227386.html" circle target="_blank" style="text-decoration: none;font-size: 13px;color: black"> 电商客户关系管理实务</a>
                                </el-col>
                            </el-row>
                        </div>
                    </el-col>

                    <el-col :span="11">
                        <el-card style="padding:0;margin-top: 20px;margin-left:80px;box-shadow: 0 2px 6px rgb(180,156,69),0 0 6px rgb(63,61,179)">
                            <a href="" circle target="_blank"><img src="img/3.png" style="width: 60px;vertical-align: middle;border-radius: 30px"></a><span style="font-size: 20px"> 南焉花里店铺</span>
                            <a href="" target="_blank"><el-button  icon="el-icon-s-shop">进店</el-button></a>
                            <el-button  icon="el-icon-share" @click="cv">分享</el-button><br>
                            <span style="font-size: 15px">
                        <el-tooltip content="店铺信用度是成交订单评价持续积累的结果" placement="bottom">
                            <span>店铺信用等级</span>
                        </el-tooltip>
                            <a href="" circle target="_blank" style="color: #6c6c6c;margin-left: 200px;font-size: 13px;text-decoration: none">未开始积分</a>
                        </span><br>
                            <span style="font-size: 15px">
                        <el-tooltip content="人们用花来表达人的语言，表达人的某种感情与愿望。" placement="bottom">
                            <span>店铺花语</span>
                        </el-tooltip>
                            <span style="color: #6c6c6c;margin-left: 100px;font-size: 13px;text-decoration: none">难道喜欢一朵花就一定要把它摘下来</span>
                        </span>
                        </el-card>

                        <el-col :span="6">
                            <div style="margin-left: 80px">
                                <p style="border: 8px solid lawngreen;width:30px"></p>
                                <p style="border: 8px solid #66b1ff;width:30px"></p>
                                <p style="border: 8px solid darksalmon;width:30px"></p>
                                <p style="border: 8px solid sandybrown;width:30px"></p>
                            </div></el-col>
                        <el-col :span="6">
                            <div style="font-size: 15px;margin-bottom: 5px;margin-left: 18px">
                                <p>好评人数</p>
                                <p>访客数</p>
                                <p>差评人数</p>
                                <p>已购人数</p></div>
                        </el-col>
                        <el-col :span="12">
                            <p>
                                <el-table :data="good">
                                    <el-table-column label="支付金额" prop="q" v-if="table=='9-1'||table=='9-4'"></el-table-column>
                                    <el-table-column label="用户数量" prop="w" v-if="table=='9-2'||table=='9-4'"></el-table-column>
                                    <el-table-column label="加购人数" prop="e" v-if="table=='9-3'||table=='9-4'"></el-table-column>
                                </el-table>
                            </p>
                        </el-col>
                        <div style="margin-top: 190px;margin-left: 80px">
                            <el-progress :text-inside="true" :stroke-width="26" :percentage="p1" status="success"></el-progress>
                            <el-progress :text-inside="true" :stroke-width="26" :percentage="p2"></el-progress>
                            <el-progress :text-inside="true" :stroke-width="26" :percentage="p3" status="exception" ></el-progress>
                            <el-progress :text-inside="true" :stroke-width="26" :percentage="p4" status="warning"></el-progress>
                        </div>
                    </el-col>
                </el-row>

                <el-table :data="cate" v-if="Index=='2-1'">
                    <el-table-column type="index" label="编号"
                                     width="150"></el-table-column>
                    <el-table-column label="分类名称" prop="name"></el-table-column>
                    <el-table-column label="分类图">
                        <template slot-scope="scope">
                            <img :src="scope.row.url" width="100" alt="">
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-popconfirm @confirm="cateSelect()"
                                           title="确定切换吗？">
                                <el-button size="mini"
                                           type="primary"  slot="reference">详情页</el-button>
                            </el-popconfirm>
                            <el-popconfirm @confirm="cateDelete(scope.$index, scope.row)"
                                           title="确定删除吗？">
                                <el-button size="mini"
                                           type="danger" slot="reference">删除</el-button>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>

                <el-table :data="ban" v-if="Index=='3-1'">
                    <el-table-column type="index" label="编号"
                                     width="150"></el-table-column>
                    <el-table-column label="轮播图名称" prop="name"></el-table-column>
                    <el-table-column label="轮播图">
                        <template slot-scope="scope">
                            <img :src="scope.row.url" width="170" alt="">
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-popconfirm @confirm="banDelete(scope.$index, scope.row)"
                                           title="确定删除吗？">
                                <el-button size="mini"
                                           type="danger" slot="reference">删除</el-button>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>

                <el-table :data="pro" v-if="Index=='4-1'">
                    <el-table-column type="index" label="编号"
                                     width="50"></el-table-column>
                    <el-table-column label="商品标题" prop="title" width="100"></el-table-column>
                    <el-table-column label="价格" prop="price" width="100"></el-table-column>
                    <el-table-column label="销量" prop="saleCount" width="100"></el-table-column>
                    <el-table-column label="商品库存" prop="stock" width="100"></el-table-column>
                    <el-table-column label="商品图片" width="200">
                        <template slot-scope="scope">
                            <img :src="scope.row.url" width="120" alt="">
                        </template>
                    </el-table-column>
                    <el-table-column label="商品描述" prop="detail" width="180"></el-table-column>
                    <el-table-column label="分类ID" prop="categoryId" width="100"></el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-popconfirm @confirm="proSelect()"
                                           title="确定切换吗？">
                                <el-button size="mini"
                                           type="primary"  slot="reference">详情页</el-button>
                            </el-popconfirm>
                            <el-popconfirm @confirm="proDelete(scope.$index, scope.row)"
                                           title="确定删除吗？">
                                <el-button size="mini"
                                           type="danger" slot="reference">删除</el-button>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>

                <el-table :data="search" v-if="Index=='10-1'">
                    <el-table-column type="index" label="编号"
                                     width="50"></el-table-column>
                    <el-table-column label="商品标题" prop="title" width="100"></el-table-column>
                    <el-table-column label="价格" prop="price" width="100"></el-table-column>
                    <el-table-column label="销量" prop="saleCount" width="100"></el-table-column>
                    <el-table-column label="商品库存" prop="stock" width="100"></el-table-column>
                    <el-table-column label="商品图片" width="200">
                        <template slot-scope="scope">
                            <img :src="scope.row.url" width="120" alt="">
                        </template>
                    </el-table-column>
                    <el-table-column label="商品描述" prop="detail" width="180"></el-table-column>
                    <el-table-column label="分类ID" prop="categoryId" width="100"></el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-popconfirm @confirm="proSelect()"
                                           title="确定切换吗？">
                                <el-button size="mini"
                                           type="primary"  slot="reference">详情页</el-button>
                            </el-popconfirm>
                            <el-popconfirm @confirm="proDelete(scope.$index, scope.row)"
                                           title="确定删除吗？">
                                <el-button size="mini"
                                           type="danger" slot="reference">删除</el-button>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>

            </el-main>
        </el-container>
    </el-container>
</div>
</body>
<script src="js/vue.js"></script>
<script src="js/eui.js"></script>
<script src="js/axios.min.js"></script>
<script type="text/javascript">
    window.setInterval('showRealTime(clock)',1000)
</script>
<script type="text/JavaScript">
    function showRealTime(clock){
        const d = new Date();
        const year = d.getFullYear();
        const month = d.getMonth() + 1;
        const date = d.getDate();
        const hour = (d.getHours() < 10) ? ("0" + d.getHours()) : d.getHours();
        const min = (d.getMinutes() < 10) ? ("0" + d.getMinutes()) : d.getMinutes();
        var now = year+"年"+month+"月"+date+"日"+hour+":"+min;
        clock.innerHTML = now;
    }
</script>

<script>
    let v = new Vue({
        el: '#app',
        data: function() {
            return {
                password:"",
                user:"",
                p1:"",p2:"",p3:"",p4:"",
                wd:"",
                table:"",
                Index:"1-1",
                Data: [],//店铺数据
                data:[],//昨日数据
                cate:[],//分类表
                ban:[],//轮播图表
                pro:[],//商品表
                good:[],//指标
                search:[],//查询结果
                pho:["/img/1.webp","/img/11.png","/img/13.png"],//轮播图
            }
        },

        methods:{
            handleClose(index){
                console.log(index);
                if (index=="2-2"){
                    v.$prompt("请输入分类名称(单品、花艺、花守)","添加",{
                        confirmButtonText:"确定",
                        cancelButtonText:"取消"
                    }).then(function (object) {
                        console.log("分类名称:"+ object.value);
                        let name = object.value;
                        if (name==null||name.trim()==""){
                            v.$message.error("分类名称不能为空");
                            return;
                        }else if (name!="单品"&&name!="花艺"&&name!="花守"){
                            v.$message.error("请按照给出字段添加");
                            return;
                        }
                        axios.get("/cate/insert?name="+name).then(function (response) {
                            axios.get("/cate/select").then(function (response){
                                v.cate=response.data
                            })
                        })
                    }).catch(function () {
                        console.log("取消了");
                    })
                }else if(index=="3-2"){
                    location.href="/ban.html";
                }else if(index=="4-2"){
                    location.href="/pro.html";
                }else{
                    v.Index = index
                }
            },
            zh(){
                this.$alert('账号:admin123 密码:123', '账号信息', {
                    confirmButtonText: '确定'})
            },
            ma(){
                v.$prompt("请输入新的密码","修改密码",{
                    confirmButtonText:"确定",
                    cancelButtonText:"取消"
                }).then(function (object) {
                    console.log("分类名称:"+ object.value);
                    let password = object.value;
                    if (password!=null||password.trim()!=""){
                        axios.get("/user/update?password="+password).then(function (response) {
                            alert("修改成功")
                        }).catch(function () {
                            console.log("取消了");
                        })
                    }
                })
            },
            gg(){

            },
            fk(){

            },
            cx(){
                axios.get("/search?wd="+v.wd).then(function (response){
                    v.search=response.data;
                    v.Index='10-1'
                })
            },
            cv(){
                this.$notify({
                    title: '请复制以下链接分享',
                    message: 'http://localhost:8080/admin.html',
                    position: 'bottom-right',
                    offset: 170
                });
            },
            //format(percentage) {switch (percentage){case 50:return "访客数";case 60:return "支付金额";case 70:return "用户数";case 80:return "已购人数"}},
            tj(){v.handleClose("2-2");}, tj1(){v.handleClose("3-2");}, tj2(){v.handleClose("4-2");},
            down(){v.table="9-1"; v.$message.success("添加成功");},down1(){v.table="9-2";v.$message.success("添加成功");},down2(){v.table="9-3";v.$message.success("添加成功");},down3(){v.table="9-4";v.$message.success("添加成功");},
            add(){alert("请点击后方下拉箭头选择需要查看的指标")},
            f5(){ axios.get("/Data/select").then(function (response){
                v.Data=response.data;
                axios.get("/p1/select").then(function (response){
                    v.p1=response.data
                })
                axios.get("/p2/select").then(function (response){
                    v.p2=response.data
                })
                axios.get("/p3/select").then(function (response){
                    v.p3=response.data
                })
                axios.get("/p4/select").then(function (response){
                    v.p4=response.data
                })
                v.$message.success("刷新成功");})},
            lo(){
                axios.get("/lo").then(function () {
                    location.href="/";
                })
            },
            cateDelete(index,cate){
                axios.get("/cate/delete?id="+cate.id).then(function () {
                    //splice(下标,长度)方法是JavaScript中数组删除元素的方法
                    v.cate.splice(index,1)
                })
            },
            banDelete(index,ban){
                axios.get("/ban/delete?id="+ban.id).then(function () {
                    v.ban.splice(index,1)
                })
            },
            proDelete(index,pro){
                axios.get("/pro/delete?id="+pro.id).then(function () {
                    v.pro.splice(index,1)
                })
            },
            cateSelect(){
                window.open('','_blank')
            },
            proSelect(){
                window.open('','_blank')
            }
        },
        created:function () {
            axios.get("/Data/select").then(function (response){
                v.Data=response.data
            })
            axios.get("/data/select").then(function (response){
                v.data=response.data
            })
            axios.get("/cate/select").then(function (response){
                v.cate=response.data
            })
            axios.get("/ban/select").then(function (response){
                v.ban=response.data
            })
            axios.get("/pro/select").then(function (response){
                v.pro=response.data
            })
            axios.get("/Good/select").then(function (response){
                v.good=response.data
            })
            axios.get("/p1/select").then(function (response){
                v.p1=response.data
            })
            axios.get("/p2/select").then(function (response){
                v.p2=response.data
            })
            axios.get("/p3/select").then(function (response){
                v.p3=response.data
            })
            axios.get("/p4/select").then(function (response){
                v.p4=response.data
            })
            // axios.get("/cur").then(function (response) {
            //     v.user = response.data;
            //     if (v.user==""){
            //         location.href="";
            //     }
            // })
        }
    })
</script>
</html>